<template>
  <div v-if="billboard">
    <div class="topTitle">
      <div class="topImg">
        <img style="width: 126rem" :src="billboardList.picUrl" alt="" />
        <div class="musicOne">歌单</div>
        <div class="topImgUpText">
          🎧{{ billboardList.playCount | playvolume }}
        </div>
      </div>
      <div class="topText">
        <div class="text1">
          {{ billboard.playlist.name }}
        </div>
        <div>
          <img
            :src="
              billboard.playlist.coverImgUrl +
              '?imageView=1&type=webp&thumbnail=30x0'
            "
          />
          <span>{{ billboard.playlist.creator.nickname }}</span>
        </div>
      </div>
    </div>
    <HotMusics
    :isShows="songId==item.id  ? true : false"
      v-for="(item, i) in billboard.playlist.tracks"
      :key="item.id"
      :item="item"
      :indexs="i"
      :paused="$attrs.paused"
      @change-musics-list="$emit('change-musics-list', $event)"
    >
    </HotMusics>
    <div>
      <div class="pinglun">精彩评论</div>
      <HotComments v-for="item in hotComments" :key="item.id" :item="item">
      </HotComments>
      <div class="pinglun">最新评论</div>
      <HotComments v-for="item in comments" :key="item.id" :item="item">
      </HotComments>
    </div>
    <div class="bom">查看全部{{count}}评论</div>
  </div>
</template>

<script>
import HotMusics from "@/components/HotMusics.vue";
import HotComments from "@/components/HotComments.vue";

export default {
  
  components: {
    HotMusics,
    HotComments,
  },
  props: {
    billboardList: Object,
    songId: Number,
  },
  data() {
    return {
      billboard: null,
      comments: null,
      hotComments:null,
      count:0,
    };
  },
  methods: {},
  created() {
    this.$axios
      .get(`http://localhost:3000/playlist/detail?id=${this.billboardList.id}`)
      .then((res) => {
        this.billboard = res.data;
      });
    this.$axios
    
      .get(`http://localhost:3000/comment/playlist?id=${this.billboardList.id}`)
      .then((res) => {
        this.comments = res.data.comments;
        this.hotComments = res.data.hotComments;
        this.count = res.data.total;
      });
  },
  filters: {
    playvolume: function (arg) {
      if (arg.toString().length >= 13) {
        const volume = arg / 1000000000000;
        const realVal = parseFloat(volume).toFixed(2);
        return realVal + "万亿";
      } else if (arg.toString().length >= 9) {
        const volume = arg / 100000000;
        const realVal = parseFloat(volume).toFixed(2);
        return realVal + "亿";
      } else if (arg.toString().length >= 4) {
        const volume = arg / 10000;
        const realVal = parseFloat(volume).toFixed(2);
        return realVal + "万";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.bom{
  height: 50rem;
  line-height: 50rem;
  color: #999;
  text-align: center;
  border-bottom: 1px solid #f4f4f4;
}
.pinglun{
  width: 375rem;
  height: 23rem;
  line-height: 23rem;
  padding-left:10rem ;
  background-color: rgb(223, 218, 218);
}
.topText {
  img {
    border-radius: 15rem;
    margin-top: 10rem;
    margin-left: 10rem;
  }
  .text1 {
    font-size: 17rem;
    color: #fff;
    margin-left: 10rem;
    margin-right: 15rem;
    margin-top: 5rem;
  }
  span {
    font-size: 14rem;
    color: rgb(202, 200, 200);
    position: relative;
    top: -10rem;
    left: 3rem;
  }
}
.topTitle {
  display: flex;
  padding-top: 30rem;
  padding-bottom: 30rem;
  background-color: aqua;

  .topImg {
    position: relative;
    margin-left: 15rem;

    width: 126rem;
    img {
      border-radius: 10rem;
      width: 126rem;
    }
    .musicOne {
      position: absolute;
      color: #fff;
      font-size: 14rem;
      background-color: red;
      width: 40rem;
      height: 20rem;
      line-height: 20rem;
      top: 15rem;
      text-align: center;
      border-radius: 0rem 10rem 10rem 0rem;
    }
  }
  .topImgUpText {
    position: absolute;
    color: #fff;
    font-size: 12rem;
    right: 5rem;
    top: 5rem;
  }
}
</style>